<template>
  <main class="h-full flex flex-col bg-transparent">
    <!-- 侧边开始 -->
    <n-layout class="h-full flex flex-col bg-transparent" has-sider>
      <n-layout-sider
        v-if="!$route.meta.hidden"
        v-model:collapsed="collapsed"
        show-trigger="bar"
        bordered
        collapse-mode="width"
        :native-scrollbar="false"
        content-style="height:100%;"
        :collapsed-width="64"
        :width="200"
      >
        <LeftCatalogue></LeftCatalogue>
      </n-layout-sider>
      <!-- 侧边结束-->
      <n-layout>
        <n-layout-header bordered>
          <Head :reload="reload" />
        </n-layout-header>

        <n-layout-content class="bg-slate-200">
          <router-view v-slot="{ Component }">
            <transition name="fade" mode="out-in">
              <component :is="Component" />
            </transition>
          </router-view>
        </n-layout-content>
      </n-layout>
    </n-layout>
  </main>
</template>
<script setup lang="ts">
import { nextTick, provide, ref } from "vue";
/**
 * 头
 */
import Head from "@/components/head/Head.vue";
/**
 * 左边
 */
import LeftCatalogue from "@/components/left/LeftCatalogue.vue";
/**
 *
 */
import { storeToRefs } from "pinia";
/**
 *
 */
import { useMenuStore } from "@/store/HomeMenu";
/**
 *
 */
const menuStore = useMenuStore();
/**
 *
 */
const routerState = ref(true);
/**
 * 菜单是否折叠，值在菜单为垂直时有用
 */
const { collapsed } = storeToRefs(menuStore);
/**
 *
 */
provide("reload", reload);

/**
 * n-layout-content 内容组件重新加载
 */
function reload() {
  window.$loading.start();
  routerState.value = false;
  nextTick(() => {
    routerState.value = true;
  });
  setTimeout(() => {
    window.$loading.finish();
  }, 0);
}
</script>
